<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>区信息</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" />
</head>
<style>
    .chaxun {
        display: inline;
        width: 90%;
        margin-right: 20px;
    }
    
    .dignbuanniu {
        margin: 15px 0;
    }
    
    .dingbuyihang {
        padding: 0px 10px;
        width: 90%;
    }
    /*水平竖直居中  */
    
    .juzhong {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .xingzhengcunxinxitianjia {
        width: 60%;
    }
    
    .hanggao {
        margin: 15px 0px;
    }
    
    .xiangqingtitle {
        color: #999;
    }
    
    .xiangqingcontent {
        text-align: left;
        width: 50%;
    }
    
    .xiangqingjianjie {
        width: auto;
        text-align: left;
        text-indent: 40px;
        padding: 9px 40px;
    }
    
    .quanxiancaozuo {
        cursor: not-allowed;
    }
</style>


<body>
    <div style="padding: 20px; background-color: #f2f2f2">
        <div class="layui-card layui-col-space15" style="padding: 20px; background-color: #fff">
            <div class="layui-card-body">
                <!-- 顶部按钮 -->
                <form class="layui-form" action="" lay-filter="saixuan">
                    <div class="layui-row">

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button disabled type="button" class="layui-btn quanxiancaozuo" onclick="tianjia()">
                    <i class="layui-icon layui-icon-addition"></i>&nbsp;&nbsp;添加
                  </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button disabled type="button" class="layui-btn layui-btn-danger quanxiancaozuo" onclick="shanchucheck()">
                    <i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除
                  </button>
                        </div>
                    </div>
                </form>

                <!-- 底部表格 -->
                <table id="zhenjiedaoxinxi" lay-filter="biaoge"></table>
            </div>
        </div>
    </div>
</body>

<script src="../../layui/layui.js"></script>
<script src="../../mock/mock/mock-min.js"></script>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../mock/mock1.js"></script>


<script>
    function quxiaojinyong() {
        if (localStorage.getItem('level') == '0') {
            $('.quanxiancaozuo').attr("disabled", false)
            $('.quanxiancaozuo').css("cursor", "pointer");
        } else {}
    }
    var table;
    var form;
    var option;
    var layer
    layui.use(["layer", "table", "jquery", "form"], function() {
        table = layui.table;
        form = layui.form;
        layer = layui.layer;
        //监听提交
        // form.on("submit(tijiao)", function(data) {
        //     chongzai();
        // });
        //监听编辑
        form.on("submit(bianji)", function(data) {
            chongzai();
        });
        table.on("tool(biaoge)", function(obj) {
            console.log(obj);
            switch (obj.event) {
                // 编辑页面
                case "edit":
                    layer.open({
                        type: 1,
                        title: "区信息编辑",
                        content: `
<div class="juzhong">
    <form class="layui-form" action="" style="margin-left:-60px;" lay-filter="bianji">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" value="` +
                            obj.data.name +
                            `" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn bianji" type="button" lay-filter="bianji">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
                        offset: "auto",
                        area: ["500px", "250px"],
                        success: function() {
                            form.render("select", "bianji");
                            $(".bianji").click(function() {
                                var data1 = form.val("bianji");
                                data1.id = obj.data.id;
                                console.log(data1);
                                if (data1.name !== "") {
                                    $.ajax({
                                        url: url + "town/addoreditown",
                                        method: "post",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data);
                                            if (data.code == 200) {
                                                layer.closeAll();
                                                table.reload("biaoge1", option);
                                                layer.msg('修改成功')
                                            } else {
                                                layer.msg(data.msg)
                                            }
                                        },
                                        error: function(err) {},
                                    });
                                } else {
                                    layer.msg('请输入修改的名称')
                                }

                            });
                        },
                    });
                    break;
                case "delete":
                    layer.open({
                        type: 1,
                        title: "删除",
                        offset: "auto",
                        content: `<div style="font-size: 14px; color: #606266;line-height: 100px;height: 100px;text-align: center;">确认要删除当前项吗!</div>`,
                        area: ["350px", "200px"],
                        btn: ["删除", "取消"], //可以无限个按钮
                        btn1: function() {
                            var data = {};
                            data.ids = obj.data.id
                            console.log(data)
                            $.ajax({
                                url: url + "area/deletearea",
                                method: "post",
                                data: data,
                                success: function(data) {
                                    console.log(data);
                                    if (data.code == 200) {
                                        layer.msg('删除成功!')
                                        table.reload("biaoge1", option);
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {},
                            });
                            layer.closeAll();
                        },
                        btn2: function() {
                            layer.msg("已取消操作");
                        },
                    });
                    break;
                default:
                    break;
            }
        });

        // 获取所有列表数据的参数
        option = {
            id: "biaoge1",
            url: url + "area/queryarea",
            elem: "#zhenjiedaoxinxi",
            page: true,
            title: "区信息",
            size: "lg",
            limits: [10, 20, 50, 100, 200, 500],
            headers: {
                token: localStorage.getItem('token')
            },
            text: {
                none: "本页暂无数据,请刷新页面", //默认：无数据。
            },
            request: {
                pageName: "currrntPage", //页码的参数名称，默认：page
                limitName: "size", //每页数据量的参数名，默认：limit
            },
            page: {
                curr: 1 //重新从第 1 页开始
            },
            parseData: function(res) {
                console.log(res)
                if (res.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                //res 即为原始返回的数据
                return {
                    code: 0, //解析接口状态
                    msg: res.msg, //解析提示文本
                    count: res.data.count, //解析数据长度
                    data: setdata(res.data.areas), //解析数据列表
                };

            },
            done() {
                quxiaojinyong()
            },
            cols: [
                [{
                    type: "checkbox",
                }, {
                    type: "numbers",
                    title: "序号",
                }, {
                    field: "name",
                    title: "区(县)名",
                    align: "center",
                }, {
                    title: "操作",
                    toolbar: "#caozuo",
                    align: "center",
                }, ],
            ],
        };
        tableIns = table.render(option);
        chongzai();
    });
    // 表格信息重载         (根据列表参数获取所有列表数据)
    function chongzai() {
        console.log(option);
    }
    // 控制添加数据用的弹出层
    function tianjia() {
        layer.open({
            type: 1,
            title: "区信息添加",
            content: `
<div class="juzhong">
    <form class="layui-form" action=""  style="margin-left:-60px;" lay-filter="tianjia">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" lay-submit class="layui-btn tijiao" lay-filter="tijiao">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
            offset: "auto",
            area: ["500px", "250px"],
            success: function() {
                form.render("select", "tianjia");
                $(".tijiao").click(function() {
                    var data = form.val("tianjia");
                    data.id = 0;
                    console.log(data);
                    if (data.name != "") {
                        $.ajax({
                            url: url + "area/addorediarea",
                            data: data,
                            method: "post",
                            success: function(data) {
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("biaoge1", option);
                                    layer.msg(data.msg)
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                layer.msg("添加失败")
                            },
                        });
                    }

                });
            },
        });
    }
    // 根据上面的删除check选中的进行删除
    function shanchucheck() {
        var checkStatus = table.checkStatus("biaoge1"); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data); //获取选中行的数据
        var data = {};
        data.ids = []
        checkStatus.data.forEach((item) => {
            data.ids.push(item.id);
        });
        console.log(data)

        if (data.ids.length !== 0) {
            $.ajax({
                url: url + "area/deletearea",
                method: "post",
                data: data,
                traditional: true, //防止深度序列化
                success: function(data) {
                    if (data.code === 200) {
                        layer.msg('删除成功')
                        table.reload("biaoge1", option);
                    }
                    console.log(data);
                },
                error: function(err) {},
            });
        } else {
            layer.msg('请选择本页要删除的项')
        }
    }
    // 修改数据
    function setdata(data) {
        return data;
    }
</script>
<!-- 操作框两个按钮的模板 -->
<script type="text/html" id="caozuo">
    <button disabled class="layui-btn layui-btn-xs layui-btn-normal quanxiancaozuo" lay-event="edit">编辑</button>
    <button disabled class="layui-btn layui-btn-xs layui-btn-danger quanxiancaozuo" lay-event="delete">删除</button>
</script>

</html>